import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xiaotiancai/page/DetailPage.dart';
import 'package:xiaotiancai/style.dart';

class ClassPage extends StatefulWidget{
  const ClassPage({super.key});
  @override
  State<StatefulWidget> createState()=>_ClassPage();
}

class _ClassPage extends State<ClassPage>{
  List<String>list=[
    "电话手表",
    "原装表带",
    "护耳耳机",
    "智能牙刷",
    "家教机",
    "词典笔",
    "精品配件",
    "儿童平板",
  ];

  int nowIndex=0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(padding: EdgeInsets.only(top: 10,left: 10,bottom: 10),child: Text("分类",style: TextStyle(
              fontSize: 16
          ),)),
          Expanded(
              child:Row(children: [
                SizedBox(width: 100,child: Column(children: [
                  const Text("热门推荐"),
                  const SizedBox(height: 10,),
                  Expanded(child: ListView.builder(itemBuilder:(c,i){
                    return InkWell(onTap:(){
                      nowIndex=i;
                      setState(() {});
                    },child: (nowIndex==i)?Container(
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [
                        Container(
                          height: 25,
                          width: 5,
                          decoration: BoxDecoration(
                              color: Style.primaryColor,
                              borderRadius: const BorderRadius.all(Radius.circular(10))
                          ),),
                        const SizedBox(width: 5,),
                        Text(list[i])
                      ],),
                    ):
                    Padding(padding: const EdgeInsets.symmetric(vertical: 15),
                        child: Center(child: Text(list[i]))));
                  },itemCount: list.length,))

                ],),),

                Expanded(child: Column(children: [
                  Text(list[nowIndex],style: const TextStyle(
                      color: Colors.grey
                  ),),
                  const SizedBox(height: 20,),
                  Expanded(child:  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5),
                    child: GridView.builder(
                        shrinkWrap: true,
                        primary: false,
                        gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            crossAxisSpacing: 5,
                            mainAxisSpacing: 5,
                            childAspectRatio: 0.6),
                        itemCount: 19,
                        itemBuilder: (BuildContext context, int index) {
                          return InkWell(
                            onTap:(){
                              Navigator.push(context, MaterialPageRoute(builder:(c)=>const DetailPage()));
                            },
                            child: Stack(
                              children: [
                                Container(
                                  decoration: const BoxDecoration(
                                    borderRadius: BorderRadius.all(Radius.circular(5)),
                                    color: Colors.white,
                                  ),
                                  child: Column(children: [
                                    Expanded(
                                      child: Container(
                                        width: double.infinity,
                                        height: 100,
                                        decoration: const BoxDecoration(
                                          image: DecorationImage(
                                              image: NetworkImage("https://static-assets-prod.okii.com/xtc-products/z8/pc/scene-section/bg5.jpg"),
                                              fit: BoxFit.cover
                                          ),
                                          borderRadius: BorderRadius.vertical(top: Radius.circular(5)),
                                        ),
                                      ),
                                    ),
                                    const SizedBox(height: 5,),
                                    const Text("耳机E3",style: TextStyle(
                                        fontWeight: FontWeight.bold
                                    ),),
                                    const SizedBox(height: 10,),
                                    const Text("¥399",style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        color: Colors.red
                                    ),),
                                    const SizedBox(height: 10,),
                                  ],),
                                ),
                                Container(
                                  alignment: Alignment.bottomRight,
                                  child: Container(
                                      padding: const EdgeInsets.all(5),
                                      decoration: const BoxDecoration(
                                          color: Colors.red,
                                          borderRadius: BorderRadius.only(topLeft: Radius.circular(15),bottomRight: Radius.circular(10))
                                      ),child: const Text("新品",style: TextStyle(color: Colors.white),)),
                                )
                              ],
                            ),
                          );
                        }),
                  ),)

                ],),),
              ],)
          ),
        ],
      ),
    );
  }
}